<template>
  <div class="columns oolong-container">
    <div class="oolong-leftNav">
      <ul class="oolong-leftNav-menu">
        <li v-for="(levelOne0ption,levelOne0ption_index) in menuData" :key="levelOne0ption_index">
          <a @click="unfold(menuData,levelOne0ption_index)">
            <oolongIcon type="navicon-round"></oolongIcon>
            <span>{{ levelOne0ption.name }}</span>
          </a>
          <ul>
            <li v-for="(levelTwo0ption,levelTwo0ption_index) in levelOne0ption.menuChild" v-show="levelTwo0ption.show"
                :key="levelTwo0ption_index">
              <!--<router-link :to="{ path:levelTwo0ption.url, exact: true }"-->
              <!--@click="selectedOption(levelOne0ption.id,levelTwo0ption_index)">-->
              <a @click="unfold(levelOne0ption.menuChild,levelTwo0ption_index)">
                <span :class="{active:levelTwo0ption.iscur}">{{ levelTwo0ption.name }}</span>
              </a>
              <!--</router-link>-->
              <ul>
                <li v-for="(levelThree0ption,levelThree0ption_index) in levelTwo0ption.menuChild"
                    v-show="levelThree0ption.show" :key="levelThree0ption_index">
                  <router-link :to="{ path:levelThree0ption.url, exact: true }"
                               @click="selectedOption(levelTwo0ption.id,levelThree0ption_index)">
                    <span :class="{active:levelThree0ption.iscur}">{{ levelThree0ption.name }}</span>
                  </router-link>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="column oolong-rightContent">
      <router-view :url="url" :type="type"></router-view>
    </div>
  </div>
</template>

<script>
import '../resources/css/admin-template/oolong-container.scss'

export default {
  data() {
    return {
      // 服务ip
      url: 'http://192.168.1.114:8070',
      // type:"pro" : 连接服务
      // type:"dev" : 本地数据
      type: 'dev',
      menuData: [
        {
          name: 'Vuejs组件列表',
          id: '1',
          iscur: false,
          menuChild: [
            {
              name: 'Basic',
              id: '1.1',
              iscur: false,
              show: true,
              url: '/Basic',
              menuChild: [
                {
                  name: 'Color色彩', id: '1.1.1', iscur: false, show: false, url: '/Color'
                },
                {
                  name: 'Button按钮', id: '1.1.2', iscur: false, show: false, url: '/Button'
                },
                {
                  name: 'Divider分割线', id: '1.1.3', iscur: false, show: false, url: '/Divider'
                }
              ]
            },
            {
              name: 'View',
              id: '1.2',
              iscur: false,
              show: true,
              url: '/View',
              menuChild: [
                {
                  name: 'Tag标签', id: '1.2.1', iscur: false, show: false, url: '/Tag'
                },
                {
                  name: 'ColorBox色彩板', id: '1.2.2', iscur: false, show: false, url: '/ColorBox'
                },
                {
                  name: 'Panel面板', id: '1.2.3', iscur: false, show: false, url: '/Panel'
                },
                {
                  name: 'Table表格', id: '1.2.4', iscur: false, show: false, url: '/Table'
                },
                {
                  name: 'Tree树形', id: '1.2.5', iscur: false, show: false, url: '/MenuTree'
                },
                {
                  name: 'Life', id: '1.2.6', iscur: false, show: false, url: '/life'
                },
                {
                  name: 'Notice通知', id: '1.2.7', iscur: false, show: false, url: '/Notice'
                },
                {
                  name: 'Dialog对话框', id: '1.2.8', iscur: false, show: false, url: '/Dialog'
                },
                {
                  name: 'Tooltip文字提示', id: '1.2.9', iscur: false, show: false, url: '/Tooltip'
                },
                {
                  name: 'Poptip气泡提示', id: '1.2.10', iscur: false, show: false, url: '/Poptip'
                },
                {
                  name: 'LoadingBar加载进度条', id: '1.2.11', iscur: false, show: false, url: '/LoadingBar'
                },
                {
                  name: 'spin加载中', id: '1.2.12', iscur: false, show: false, url: '/spin'
                },
                {
                  name: 'Collapse 折叠面板', id: '1.2.13', iscur: false, show: false, url: '/collapse'
                }
              ]
            },
            {
              name: 'Form',
              id: '1.3',
              iscur: false,
              show: true,
              url: '/Form',
              menuChild: [
                {
                  name: 'AutoComplete自动完成', id: '1.3.0', iscur: false, show: false, url: '/AutoComplete'
                },
                {
                  name: 'Select选择框', id: '1.3.1', iscur: false, show: false, url: '/Select'
                },
                {
                  name: 'Input输入框', id: '1.3.2', iscur: false, show: false, url: '/Input'
                },
                {
                  name: 'Radio单选框', id: '1.3.3', iscur: false, show: false, url: '/Radio'
                },
                {
                  name: 'Checkbox多选框', id: '1.3.4', iscur: false, show: false, url: '/Checkbox'
                },
                {
                  name: 'Switch开关', id: '1.3.5', iscur: false, show: false, url: '/Switch'
                },
                {
                  name: 'Slider滑块', id: '1.3.6', iscur: false, show: false, url: '/Slider'
                },
                {
                  name: 'DatePicker日期选择器', id: '1.3.7', iscur: false, show: false, url: '/DatePicker'
                },
                {
                  name: 'TimePicker时间选择器', id: '1.3.8', iscur: false, show: false, url: '/TimePicker'
                },
                {
                  name: 'Transfer穿梭', id: '1.3.9', iscur: false, show: false, url: '/Transfer'
                },
                {
                  name: 'Form表单', id: '1.3.10', iscur: false, show: false, url: '/Form'
                },
                {
                  name: 'Upload上传', id: '1.3.11', iscur: false, show: false, url: '/Upload'
                }
              ]
            },
            {
              name: 'Navigation',
              id: '1.4',
              iscur: false,
              show: true,
              url: '/Navigation',
              menuChild: [
                {
                  name: 'Breadcrumb面包屑', id: '1.4.1', iscur: false, show: false, url: '/Breadcrumb', menuChild: []
                },
                {
                  name: 'Menu菜单', id: '1.4.2', iscur: false, show: false, url: '/Menu', menuChild: []
                },
                {
                  name: 'Dropdown下拉菜单', id: '1.4.3', iscur: false, show: false, url: '/Dropdown', menuChild: []
                },
                {
                  name: 'Page分页', id: '1.4.4', iscur: false, show: false, url: '/Page', menuChild: []
                },
                {
                  name: 'Tabs标签', id: '1.4.5', iscur: false, show: false, url: '/Tabs', menuChild: []
                },
                {
                  name: 'Steps步骤条', id: '1.4.6', iscur: false, show: false, url: '/Steps', menuChild: []
                }
              ]
            },
            {
              name: 'Chart',
              id: '1.5',
              iscur: false,
              show: true,
              url: '/Chart',
              menuChild: [
                {
                  name: 'Circle进度环', id: '1.5.1', iscur: false, show: false, url: '/Circle', menuChild: []
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    unfold: function (array, index) {
      array.map(function (v, i) {
        if (i === index) {
          v.iscur = true;
          v.menuChild.map(function (value1, index1) {
            value1.show = !value1.show;
          });
        } else {
          v.iscur = false;
        }
      });
    },
    // 选中样式设置
    selectedOption: function (num, index) {
      this.menuData.map(function (v, i) {
        if (v.id === num) {
          v.menuChild.map(function (m, n) {
            n === index ? m.iscur = true : m.iscur = false;
          });
        } else {
          v.menuChild.map(function (m, n) {
            m.iscur = false;
          });
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
